<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=0.45, user-scalable=yes">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        table {
            caption-side: top;
        }
    </style>
    <title>全部投喂记录</title>
</head>
<body>
<h2 id="headText" style="margin-left: 0.5%;margin-top: 0.3%"></h2>
<hr>
<div id="app">
    <input type="button" class="btn btn-primary btn-sm"
           onclick="location.href = '/CampusCats/home'" value="回主页" style="margin-left: 0.5%">
    <input type="button" class="btn btn-primary btn-sm"
           onclick="location.href = '/CampusCats/catsList'" value="查看所有猫咪">
    <input type="button" class="btn btn-primary btn-sm" id="flush" value="刷新" @click="flush">
    <hr>
    <div class="button" id="BtnDiv" style="margin-left: 0.5%">
        <input type="button" class="btn btn-primary btn-sm"
               onclick="location.href = '/CampusCats/userRecords'" value="查看我的记录">
        <input type="button" id="addBtn" class="btn btn-primary btn-sm" value="新增" @click="add">
    </div>
    <div id="recordsTableDiv">
        <table id="records" class="table table-striped">
            <caption style="margin-left: 0.5%">全部出现记录</caption>
            <tr v-if="typeDef">
                <th>编号</th>
                <th>猫咪</th>
                <th>操作用户</th>
                <th>投喂位置</th>
                <th>投喂时间</th>
                <th>食物</th>
                <th>上次更新时间</th>
                <th v-if="user.isAdmin">操作</th>
            </tr>
            <tr v-if="typeDef" v-for="feeding in feedings.data">
                <td>{{feeding.recordId}}</td>
                <td>{{feeding.catName}}</td>
                <td>{{feeding.username}}</td>
                <td>{{feeding.location}}</td>
                <td>{{feeding.recordTime}}</td>
                <td>{{feeding.remarks}}</td>
                <td>{{feeding.lastUpdate}}</td>
                <td v-if="user.isAdmin">
                    <input type="button" class="btn btn-primary btn-sm" value="修改"
                           @click="upd('feeding', feeding.recordId)">
                    <input type="button" class="btn btn-primary btn-sm" value="删除"
                           @click="del('feeding', feeding.recordId)">
                </td>
            </tr>
            <tr v-if="!typeDef">
                <th>编号</th>
                <th>猫咪</th>
                <th>操作用户</th>
                <th>出现位置</th>
                <th>出现时间</th>
                <th>上次更新时间</th>
                <th v-if="user.isAdmin">操作</th>
            </tr>
            <tr v-if="!typeDef" v-for="appearance in appearances.data">
                <td>{{appearance.recordId}}</td>
                <td>{{appearance.catName}}</td>
                <td>{{appearance.username}}</td>
                <td>{{appearance.location}}</td>
                <td>{{appearance.recordTime}}</td>
                <td>{{appearance.lastUpdate}}</td>
                <td v-if="user.isAdmin">
                    <input type="button" class="btn btn-primary btn-sm" value="修改"
                           @click="upd('appearance', appearance.recordId)">
                    <input type="button" class="btn btn-primary btn-sm" value="删除"
                           @click="del('appearance', appearance.recordId)">
                </td>
            </tr>
        </table>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
<script src="/CampusCats/js/userMsg.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            user: {},
            typeDef: window.location.href.split('=')[1] === 'feeding',
            feedings: {},
            appearances: {}
        },
        async mounted() {
            this.user = await userMsg("");
            await this.flush();
        },
        methods: {
            async flush() {
                if (this.typeDef) {
                    this.feedings = (await myAxios.get('/feedings')).data;
                    if (this.feedings.code !== 20021) {
                        alert("错误：" + this.feedings.msg + "\n错误代码：" + this.feedings.code);
                    }
                } else {
                    document.title = '全部出现记录';
                    this.appearances = (await myAxios.get('/appearances')).data;
                    if (this.appearances.code !== 20021) {
                        alert("错误：" + this.appearances.msg + "\n错误代码：" + this.appearances.code);
                    }
                }
            },
            add() {
                if (this.typeDef) {
                    location.href = '/CampusCats/addRecord?type=feeding';
                } else {
                    location.href = '/CampusCats/addRecord?type=appearance';
                }
            },
            upd(recordType, id) {
                location.href = '/CampusCats/updateRecord?id=' + id + '&type=' + recordType;
            },
            async del(recordType, id) {
                let del = (await myAxios.delete('/' + recordType + 's', {data:[id]})).data;
                if (del.code !== 20041) {
                    alert("错误：" + del.msg + "\n错误代码：" + del.code);
                }
                await this.flush();
            }
        }
    });
</script>
</body>
</html>